<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <style>
                    .xxpayPopupDiv .center {
                        width: 80%;
                    }
                </style>
        
                <form class="layui-form center">
                    <div class="layui-form-item">
                        <label class="layui-form-label">二维码名称</label>
                        <div class="layui-input-block">
                            <input type="text" required name="codeName"  lay-verify="required" placeholder="请输入二维码名称" autocomplete="off" class="layui-input ewmname">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最小金额</label>
                        <div class="layui-input-block">
                            <input type="text" required name="minAmount"  lay-verify="required | number" placeholder="请输入最小金额(元)" autocomplete="off" class="layui-input minM">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大金额</label>
                        <div class="layui-input-block">
                            <input type="text" required name="maxAmount"  lay-verify="required | number" placeholder="请输入最大金额(元)" autocomplete="off" class="layui-input maxM">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支持渠道</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="checkbox" lay-filter="wxCheckboxFilter" id="wxCheckboxInput" title="&nbsp;微&nbsp;信&nbsp;" />
                            </div>
                            <div class="layui-inline layui-hide" id="wxSelectDiv">
                                <select id="wxSelect">
                                    <option value="0">微信公众号支付</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="checkbox" lay-filter="alipayCheckboxFilter" id="alipayCheckboxInput" title="支付宝" />
                            </div>
                            <div class="layui-inline layui-hide" id="alipaySelectDiv">
                                <select id="alipaySelect">
                                    <option value="1" lay-filter="alipayPayType">支付宝当面付H5</option>
                                    <option value="2" lay-filter="alipayPayType">支付宝手机wap</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <div class="layui-input-block">
                            <button type="button" lay-submit lay-filter="btnMd" class="layui-hide xxpayYesBtn">保存</button>
                        </div>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form','admin','view'],function(){
        var form = layui.form
        , admin = layui.admin
        , $ = layui.$
        , view = layui.view
        , layer = layui.layer 
        ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息


        var cruId = view.getOpenParams("id");
        var cruApId = view.getOpenParams("appId");

        form.on('checkbox(wxCheckboxFilter)', function(data){
            if(data.elem.checked){
                $("#wxSelectDiv").removeClass("layui-hide");
            }else{
                $("#wxSelectDiv").addClass("layui-hide");
            }
        });

        form.on('checkbox(alipayCheckboxFilter)', function(data){
            if(data.elem.checked){
                $("#alipaySelectDiv").removeClass("layui-hide");
            }else{
                $("#alipaySelectDiv").addClass("layui-hide");
            }
        });

        admin.req({
            type: 'get',
            url: layui.setter.baseUrl + '/mch_qrcode/get',
            data: {
                id: cruId,
            },
            error: function(err){
                layer.alert(err,{title:'请求失败'},function(index){
                    layer.close(index);
                })
            },
            success: function(res){
                if(res.code == 0){
                    $('.ewmname').val(res.data.codeName);
                    $('.minM').val(res.data.minAmount == null ? '' : res.data.minAmount/100);
                    $('.maxM').val(res.data.maxAmount == null ? '' : res.data.maxAmount/100);

                    var channels = JSON.parse(res.data.channels);
                    var wxCheckProduct = '';
                    var alipayCheckProduct = '';
                    var channelName = '';
                    var alipayCheckVal = '';
                    $.each(channels, function(){
                        if(this.channelId == "wxpay_jsapi"){
                            wxCheckProduct = this.productId;
                        }
                        if(this.channelId == "alipay_wap"){
                            channelName = "支付宝手机wap";
                            alipayCheckVal = "2";
                            alipayCheckProduct = '8007'
                        }
                        if(this.channelId == "alipay_qr_h5"){
                            channelName = "支付宝当面付H5";
                            alipayCheckVal = "1";
                            alipayCheckProduct = '8007'
                        }
                    });

                    if(wxCheckProduct != ""){
                        $('#wxCheckboxInput').prop('checked', true);
                        $("#wxSelectDiv").removeClass("layui-hide");
                    }

                    if(alipayCheckProduct != ""){
                        $('#alipayCheckboxInput').prop('checked', true);
                        $("#alipaySelectDiv").removeClass("layui-hide");
                    }

                    if(wxCheckProduct == '8004'){ //判断支付（微信）扫码的产品
                        var wxSelected = wxCheckProduct == '8004' ? "selected" : "";
                        $('#wxSelect').append("<option value='0' "+wxSelected+" >微信公众号支付</option>");
                    }

                    if(alipayCheckProduct == '8007'){ //判断支付（支付宝）扫码的产品
                        $("#alipaySelect").find("option[value = "+alipayCheckVal+"]").attr("selected","selected");
                    }

                }else {
                    layer.alert(res.msg,{title: '获取数据失败'});
                }
                form.render();
            }
        })


         //监听提交
         form.on('submit(btnMd)', function(data){
             var channels = [];

             var isCheckWx = $('#wxCheckboxInput').prop('checked')  ;
             var isCheckAlipay = $('#alipayCheckboxInput').prop('checked')  ;

             if(isCheckWx){
                 // var wxCheckProduct = $('#wxSelect').val();
                 channels.push({"channelId":"wxpay_jsapi","productId":"8004"});
             }

             if(isCheckAlipay){
                 var payType = $('#alipaySelect').val();
                 var channelId = "";
                 var productId = "";
                 if ("1" == payType) {
                     channelId = "alipay_qr_h5";
                     productId = "8007";
                 }else if ("2" == payType) {
                     channelId = "alipay_wap";
                     productId = "8007";
                 }else {
                     return layer.alert('请选择至少一项支付渠道！');
                 }

                 channels.push({"channelId":channelId,"productId":productId});
             }
             admin.req({
                 type: 'post',
                 url: layui.setter.baseUrl + '/mch_qrcode/update', //模拟接口,
                 // data: "params=" + JSON.stringify(data.field),
                 data: {
                     id:cruId,
                     appId: cruApId ,
                     channels: JSON.stringify(channels) ,
                     codeName: data.field.codeName,
                     minAmount: data.field.minAmount,
                     maxAmount: data.field.maxAmount
                 },
                 error: function(err){layer.alert(err.msg,{title:"请求失败"})},
                 success: function(res){
                     console.log(res);
                     if(res.code == 0){
                         layer.alert(res.msg, {title: '保存成功'},function(index){
                             layer.closeAll(); //关闭所有弹层
                             layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                         });
                     }else {
                         // layer.alert(res.msg,{title: '保存失败'})
                     }
                 }
             });
             return false;
        });

        form.render();
    })
</script>